---
title: 图片标注工具
description: 图片查看
---

用于图像和标注（预）信息的查看。

## 用法

## Examples

### 仅显示图片

范例展现，多个工具同时标注一张图片时参数，也可以按需传入所需工具配置,使用标注组件时需引入样式。

```jsx live=true
// import AnnotationOperation, { BasicConfig } from "@labelu/components";
// import "@labelu/components/dist/index.css";
function App() {
  const exportData = function (data) {
  };

  const onSave = function (data, imgList, index) {
  };

  const fileList = [
    {
      id: 1,
      url: "https://images.unsplash.com/photo-1653122952207-f20ba3c64f35?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
      result: JSON.stringify([]),
    },
  ];

  const attribute = [
    {
      key: "玩偶发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的",
      value:
        "玩偶发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的发生的",
    },
    {
      key: "玩偶2",
      value: "玩偶2",
    },
    {
      key: "玩偶3",
      value: "玩偶3",
    },
  ];

  const tagList = [
    {
      key: "类别1",
      value: "class1",
      isMulti: true,
      subSelected: [
        {
          key: "选项1",
          value: "option1",
          isDefault: true,
        },
        {
          key: "选项2",
          value: "option2",
          isDefault: false,
        },
      ],
    },
  ];

  const tools = [
    {
      tool: "lineTool",
      config: {
        isShowCursor: false,
        lineType: 0,
        lineColor: 1,
        edgeAdsorption: true,
        outOfTarget: true,
        isShowOrder: false,
        attributeConfigurable: true,
        textConfigurable: true,
        textCheckType: 4,
        customFormat: "^[\\s\\S]{1,3}$",
        lowerLimitPointNum: 4,
        upperLimitPointNum: "",
        attributeList: [{ key: "lineTool", value: "lineTool" }],
      },
    },
    {
      tool: "pointTool",
      config: {
        isShowCursor: false,
        isShowOrder: false,
        attributeConfigurable: true,
        textConfigurable: true,
        textCheckType: 0,
        customFormat: "",
        attributeList: [{ key: "pointTool", value: "pointTool" }],
      },
    },
    {
      tool: "polygonTool",
      config: {
        isShowCursor: false,
        lineType: 0,
        lineColor: 0,
        drawOutsideTarget: false,
        edgeAdsorption: true,
        isShowOrder: false,
        attributeConfigurable: true,
        textConfigurable: true,
        textCheckType: 0,
        customFormat: "",
        attributeList: [{ key: "polygonTool", value: "polygonTool" }],
      },
    },
    {
      tool: "rectTool",
      config: {
        isShowCursor: false,
        showConfirm: false,
        skipWhileNoDependencies: false,
        drawOutsideTarget: false,
        copyBackwardResult: true,
        minWidth: 1,
        minHeight: 1,
        isShowOrder: false,
        attributeConfigurable: true,
        textConfigurable: true,
        textCheckType: 4,
        customFormat: "",
        attributeList: [{ key: "rectTool", value: "rectTool" }],
      },
    },
  ];

  const textConfig = [
    {
      label: "我的描述",
      key: "描述的关键",
      required: true,
      default: "",
      maxLength: 200,
    },
    {
      label: "我的描述1",
      key: "描述的关键1",
      required: true,
      default: "",
      maxLength: 200,
    },
  ];

  return (
    <div className="App">
      <AnnotationOperation
        exportData={exportData} // 导出标注结果回调接口
        imgList={fileList} // 标注文件及预标注结果
        attributeList={attribute} // 公共标签配置（可选）
        tagConfigList={tagList} // 分类配置（可选）
        toolsBasicConfig={tools}
        textConfig={textConfig} // 文本描述配置（可选）
        onSubmit={onSave}
      />
    </div>
  );
}
render(App);
```

## API

### ImageProps

| Name             | Type                        | Default   | Description      |
| ---------------- | --------------------------- | --------- | ---------------- |
| exportData       | (data: any[]) => void       | undefined | 导出标注结果回调 |
| imgList          | IFileItem[]                 | false     | 文件列表         |
| onSubmit         | (data: any[]) => void       | null      | 保存标注结果回调 |
| toolsBasicConfig | BasicConfig[]               | {}        | 多组件配置       |
| attributeList    | {key:string;value:string}[] | {}        | 公共属性配置     |
| tagConfigList    | []                          | {}        | 分类配置         |
| textConfig       | object[]                    | {}        | 文本描述         |
